import React, {useEffect, useState, useLayoutEffect} from 'react';
import ReactDOM from 'react-dom';

/*function Counter1(){
    let [number, setNumber] = useState(0);
    useEffect(() => {
        const timer = setInterval(() => {
            setNumber(x => x + 1);
        },1000);
        return ()=>{
            clearInterval(timer)
        }
    });
    return (
        <div>
            {number}
        </div>
    )
}

function Counter2(){
    let [number, setNumber] = useState(0);
    useEffect(() => {
        const timer = setInterval(() => {
            setNumber(x => x + 1);
        },1000);
        return ()=>{
            clearInterval(timer)
        }
    });
    return (
        <div>
            {number}
        </div>
    )
}*/

function useCounter(){
  const [number, setNumber] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setNumber(Math.random()); // 你会发现复用的是逻辑 而不是状态
    },1000);
    return ()=>{
      clearInterval(timer)
    }
  });
  return number
}

function Counter1(){
  const number = useCounter()
  return (
    <div>
      {number}
    </div>
  )
}

function Counter2(){
  const number = useCounter()
  return (
    <div>
      {number}
    </div>
  )
}

ReactDOM.render(<>
  <Counter1/>
  <Counter2/>
</>, document.getElementById('root'));

/*
有时候我们会想要在组件之间重用一些状态逻辑
自定义 Hook 可以让你在不增加组件的情况下达到同样的目的
Hook 是一种复用状态逻辑的方式，它不复用 state 本身
事实上 Hook 的每次调用都有一个完全独立的 state
自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook
*/
